﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>选择图表对应数据</title>
    <link href="../../layui/css/layui.css" rel="stylesheet" />
    <link href="../../lib/FormSelects/dist/formSelects-v4.css" rel="stylesheet" />
    
    <script src="../../layui/layui.js"></script>


</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend><span id="vehicleid">1</span>-选择图表对应数据</legend>
    </fieldset>
    <div style="width:700px" display:inline-block>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">选择CSV原始通道名</label>
                <div class="layui-input-block">
                    <select id="channelname" name="channelname" lay-verify="required" lay-search="" xm-select="channelname" xm-select-show-count="2">
                        <option value="">选择或搜索</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">图表标题</label>
                <div class="layui-input-block">
                    <input type="text" id="echartstitle" placeholder="必填项" autocomplete="off" class="layui-input">
                    <!--<textarea class="layui-textarea" placeholder="必填项" id="csvcollumnname" autocomplete="off"></textarea>-->
                </div>

            </div>


        </form>
    </div>

    <script>
        var urlgetchannels = '/Home/GetVehicleChannels';
        var selectedid = [];
        var selectedvalue = [];
        
        layui.config({
            base: '/lib/FormSelects/dist/' //此处路径请自行处理, 可以使用绝对路径
        }).extend({
            formSelects: 'formSelects-v4'
        });
        layui.use(['element', 'layer', 'form', 'formSelects'], function () {
            var element = layui.element;
            var $ = layui.jquery;
            layer = layui.layer;
            var formSelects = layui.formSelects;
            var form = layui.form;
            var vehicleid = window.parent.a['id'];
            //console.log(vehicleid);
            $.ajax({
                url: urlgetchannels,
                dataType: 'json',
                type: 'post',
                data: {
                    vehicleid: vehicleid,
                },
                success: function (data) {
                    //console.log(data);
                    var ch=data[0].split(",");
                
                    if (ch.length > 0) {
                        $("#channelname").empty();//清空下拉框
                        $("#channelname").append("<option value=''>--请选择--</option>");
                        for (var i = 0; i < ch.length; i++) {
                            
                            var item = ch[i];
                            if (item != "Time") {
                                //这里接受的时候直接写item即可，不需要指定label
                                $("#channelname").append("<option value=" + item + ">" + item + "</option>");
                            }
                            

                        }
                    } else {
                        $("#channelname").empty();//清空下拉框
                        $("#channelname").append("<option value=''>无数据</option>");
                    }

                    formSelects.render('channelname');
                    formSelects.btns('channelname', ['select', 'remove', 'reverse'], { show: 'icon' });

                  
                }
            });
            //要写在异步请求里面，否则会有顺序问题
            formSelects.on('channelname', function (id,vals) {
               /* console.log(vals);*/
                selectedid = [];
                selectedvalue = [];
                for (var key in vals) {
                    selectedvalue.push(vals[key].value);
                    selectedid.push(key);
                }
                //console.log(selectedid);
                //console.log(selectedvalue);
            }, true);
           
        });


    </script>

</body>



</html>